<div class="attendance-container">
  <div class="attendance-head">
    <div class="head-left">
      <a [routerLink]="['/outer/project-type']" class="breadcrumb">
        项目
      </a>
      <i nz-icon type="right" theme="outline"></i>
      <a (click)="routeToSurvey()" class="breadcrumb">
        {{projectInfo.name}}
      </a>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        考勤情况
      </b>
    </div>
    <div class="head-right">
    </div>
  </div>
  <div class="attendance-body">
    <div class="body">
      <div class="attendance-body-calendar-head">
        <nz-month-picker [(ngModel)]="checkDate" (ngModelChange)="onPickerChange($event)" nzPlaceHolder="请选择月份">
        </nz-month-picker>
      </div>
      <div class="attendance-body-calendar-body zzj-scrollbar">
        <nz-calendar [(ngModel)]="checkDate" (nzValueChange)="onCalendarChange($event)">
          <ul *nzDateCell="let date" class="events">
            <ng-container [ngSwitch]="date.getDate()">
              <ng-container *ngFor="let item of dateList">
                <ng-container *ngSwitchCase="item.day">
                  <li *ngFor="let count of item.array;let idx = index;" (click)="getDetail(idx)">
                    <nz-alert [ngClass]="{'attendance-body-item-none': count === 0}" nzType="info"
                      [nzMessage]="countTemplate"></nz-alert>
                    <ng-template #countTemplate>
                      <span *ngIf="idx == 0">总人数</span>
                      <span *ngIf="idx == 1">监理单位：</span>
                      <span *ngIf="idx == 2">施工单位：</span>
                      <span *ngIf="idx == 3">作业工人：</span>
                      {{count}}
                    </ng-template>
                  </li>
                </ng-container>
              </ng-container>
            </ng-container>
          </ul>
        </nz-calendar>
      </div>
    </div>
  </div>
  <nz-modal class="attendance-detail" [(nzVisible)]="isVisible" nzTitle="考勤列表详情" [nzFooter]="null" nzWidth="1000"
    (nzOnCancel)="closeModal()">
    <div nz-row nzGutter="16">
      <div *ngFor="let item of detailList" nz-col class="gutter-row" nzSpan="8">
        <nz-card>
          <div class="attendance-detail-left"><img src="../../../../../assets/images/project/touxiang_default.png"
              alt="">
          </div>
          <div class="attendance-detail-right">
            <div>{{item.name}}</div>
            <div>{{item.position}}</div>
            <div class="attendance-detail-right-shangban">
              <img src="../../../../../assets/images/project/icon_shangban.png"
                alt=""><span>{{item.inTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
            </div>
            <div class="attendance-detail-right-xiaban">
              <img src="../../../../../assets/images/project/icon_shangban.png"
                alt=""><span>{{item.outTime === '0001-01-01T00:00:00' ? '-' : item.outTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
            </div>
          </div>
        </nz-card>
      </div>
    </div>
    <div class="pager">
      <nz-pagination [(nzPageIndex)]="detailPageInfo.nzPageIndex" [(nzPageSize)]="detailPageInfo.maxResultCount"
        [(nzTotal)]="detailPageInfo.nzTotal" (nzPageIndexChange)="handlePageIndexChange($event)" nzShowQuickJumper>
      </nz-pagination>
    </div>
  </nz-modal>
</div>